-
Notifications
You must be signed in to change notification settings - Fork 1
Update documentation adding the new mobile sdk #217
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR updates the documentation to integrate the new mobile SDK (@fishjam-cloud/mobile-client) which is now based on the web SDK. The documentation for web (React) and mobile (React Native) platforms has been consolidated into unified how-to guides under a new client/ directory.
Changes:
- Migrated from
@fishjam-cloud/react-native-clientto@fishjam-cloud/mobile-client - Consolidated web and mobile documentation into unified guides with platform-specific sections
- Added CSS badge styles to distinguish between web-only and mobile-only features
- Updated all code examples and API references to use the new SDK
Reviewed changes
Copilot reviewed 52 out of 53 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updated dependency from react-native-client to mobile-client |
| yarn.lock | Added mobile-client package link |
| docusaurus.config.ts | Updated TypeDoc entry points for mobile API |
| scripts/prepare.sh | Changed build path for mobile client |
| .gitmodules | Updated web-client-sdk branch reference |
| src/css/custom.css | Added platform badge styles for documentation |
| docs/tutorials/*.mdx | Updated quick-start guides with new SDK examples |
| docs/how-to/client/*.mdx | New unified guides with platform tabs |
| docs/how-to/react/*.mdx | Removed (consolidated into client/) |
| docs/how-to/react-native/*.mdx | Removed (consolidated into client/) |
| docs/index.mdx | Updated links to new unified documentation |
| docs/how-to/features/*.mdx | Updated SDK import references |
| docs/how-to/backend/server-setup.mdx | Updated metadata documentation link |
| docs/explanation/public-livestreams.mdx | Updated code examples for new SDK |
Comments suppressed due to low confidence (1)
docs/how-to/client/picture-in-picture.mdx:184
- The code uses type assertions with
as anywhich bypasses TypeScript's type checking. This pattern is repeated multiple times (lines 183, 184, 328, 329). Consider defining proper types for the ref or providing a more type-safe solution in the documentation examples.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <VideoRenderer stream={cameraTrack?.stream} /> // remember to import | ||
| your VideoRenderer component |
Copilot
AI
Jan 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The inline comments in the JSX code use double slashes "//" instead of the proper JSX comment syntax {/* ... */}. This will cause a syntax error. The comments on lines 36-37 should use JSX comment syntax.
| <VideoRenderer stream={cameraTrack?.stream} /> // remember to import | |
| your VideoRenderer component | |
| <VideoRenderer stream={cameraTrack?.stream} /> {/* remember to import your VideoRenderer component */} |
| } from "@fishjam-cloud/mobile-client"; | ||
|
|
||
| const { isCameraOn } = useCamera(); | ||
| const { isMicrophoneOn } = useMicrophone(); | ||
|
|
||
|
|
Copilot
AI
Jan 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The code example for Android usage is incomplete. It imports hooks and retrieves camera/microphone state but doesn't show how to actually use useForegroundService. The example should demonstrate calling the hook with configuration options.
| } from "@fishjam-cloud/mobile-client"; | |
| const { isCameraOn } = useCamera(); | |
| const { isMicrophoneOn } = useMicrophone(); | |
| useForegroundService, | |
| } from "@fishjam-cloud/mobile-client"; | |
| export function CallScreen() { | |
| const { isCameraOn } = useCamera(); | |
| const { isMicrophoneOn } = useMicrophone(); | |
| const { startForegroundService, stopForegroundService } = useForegroundService({ | |
| enableCamera: isCameraOn, | |
| enableMicrophone: isMicrophoneOn, | |
| notification: { | |
| title: "Ongoing call", | |
| text: "Your call is active", | |
| }, | |
| }); | |
| // Call this when the call starts (e.g. after joining a room) | |
| const handleCallStart = () => { | |
| startForegroundService(); | |
| }; | |
| // Call this when the call ends (e.g. before leaving a room) | |
| const handleCallEnd = () => { | |
| stopForegroundService(); | |
| }; | |
| // Render your call UI here and wire handleCallStart/handleCallEnd | |
| return null; | |
| } |
| ```xml title='AndroidManifest.xml' | ||
| <uses-permission android:name="android.permission.CAMERA"/> | ||
| <uses-permission android:name="android.permission.RECORD_AUDIO"/> | ||
| <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTING"/> |
Copilot
AI
Jan 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There's a typo in the permission name. It should be "MODIFY_AUDIO_SETTINGS" (with an 'S' at the end), not "MODIFY_AUDIO_SETTING".
| ... | ||
| <uses-permission android:name="android.permission.CAMERA"/> | ||
| <uses-permission android:name="android.permission.RECORD_AUDIO"/> | ||
| <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTING"/> |
Copilot
AI
Jan 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There's a typo in the permission name. It should be "MODIFY_AUDIO_SETTINGS" (with an 'S' at the end), not "MODIFY_AUDIO_SETTING".
| <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTING"/> | |
| <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> |
| //TODO: FCE-2487 remove it when MediaStream will be updated | ||
| interface MediaStreamWithURL extends MediaStream { | ||
| toURL(): string; |
Copilot
AI
Jan 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The TODO comment references ticket "FCE-2487" about removing the MediaStreamWithURL interface once MediaStream is updated. This TODO appears in multiple locations throughout the documentation. Consider whether this should remain in the public-facing documentation or if it should be handled differently (e.g., via internal tracking).
| // Prepare camera | ||
| await prepareCamera({ cameraEnabled: true }); | ||
| // Start camera by selecting the first available camera | ||
| await initializeDevices({ enableAudio: false }); // or just initializeDevices(); if you want both camera and mic |
Copilot
AI
Jan 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The comment says "or just initializeDevices();" but this suggests calling the function without await, which could lead to issues since it's an async operation. The comment should either use await initializeDevices() or clarify the async behavior.
| </option> | ||
| ))} | ||
| </select> | ||
| {cameraStream && <video ref={videoRef} autoPlay />} // [!code highlight] |
Copilot
AI
Jan 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The inline comment uses double slashes "//" instead of the JSX comment syntax. In JSX/TSX, comments should use {/* ... */} syntax. This appears on multiple lines in the file.
| {cameraStream && <video ref={videoRef} autoPlay />} // [!code highlight] | |
| {cameraStream && <video ref={videoRef} autoPlay />} {/* [!code highlight] */} |
Description
Update documentation adding the new mobile sdk. Since the new mobile sdk is based on the web sdk, How-to-guides for mobile and web were joined together.